<template>
  <div class="gl_heightFull">
    <div class="gl_searchBox gl_mb_15">
      <el-row :gutter="20">
        <el-col :span="4">
          <p>物品名称</p>
          <el-input v-model="Api_GET_ClubMaterialStockQO.Name" placeholder="请输入物品名称" size="mini" clearable @change="gettablelist()" />
        </el-col>
        <!-- <el-col :span="4">
          <p>状态</p>
          <el-select v-model="isfollow" size="mini" @change="gettablelist()">
            <el-option label="全部" value="" />
          </el-select>
        </el-col> -->
        <el-col :span="6">
          <p>入库时间</p>
          <el-date-picker
            v-model="tableDate"
            size="mini"
            style="width:100%"
            type="daterange"
            range-separator="至"
            start-placeholder="入库开始日期"
            end-placeholder="入库结束日期"
            value-format="yyyy-MM-dd"
            @change="changeDate"
          />
        </el-col>
        <el-col :span="4" class="search_btn">
          <!-- 查询按钮 -->
          <el-button type="primary" size="mini" @click="gettablelist()">筛选</el-button>
          <!-- 重置按钮 -->
          <el-button type="warning" size="mini" @click="clickReset()">重置</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="nav">
      <el-button type="primary" icon="el-icon-circle-plus-outline" style="margin-bottom:15px" size="mini" @click="addstudent()">新增入库</el-button>
      <el-table v-loading="tableLoading" class="gl_table_noBorder" :data="tableData" size="mini">
        <el-table-column type="index" label="序号" align="center" width="55" />
        <el-table-column label="物品名称" prop="material.name" />
        <el-table-column label="颜色型号及数量">
          <template slot-scope="{row}">
            <div v-for="(item,index) in row.materialInventories" :key="index">
              <span class="box_color">
                {{ item.color }}
              </span>
              <span class="box_color">
                {{ item.size }}
              </span>
              <span class="box_color">
                {{ item.count }}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="入库时间">
          <template slot-scope="{row}">
            <span v-if="row.creationTime">
              {{ row.creationTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}
            </span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作员" prop="creatorName" align="center" /> -->
      </el-table>
    </div>
    <!-- // 新增物资 -->
    <el-dialog
      title="新增入库"
      class="gl_dialog_TitleLine gl_dl_footer"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="1030px"
    >
      <el-form ref="ruleForm" class="gl_form_mini" :model="CreateMaterialStockInput" style="padding: 0 0px" label-width="90px">
        <div>
          <div>
            <el-form-item label="物资名称" required>
              <el-select v-model="warehouse" size="mini" style="width:230px" @change="getinventories()">
                <el-option v-for="(jtem, jndex) in mater" :key="jndex" :label="jtem.name" :value="jtem.inventories" />
              </el-select>
            </el-form-item>
            <div>
              <el-row v-for="(item,index) in courseForm" :key="index" :gutter="20">
                <el-col :span="7">
                  <el-form-item label="颜色" required>
                    <el-select v-model="item.color" size="mini" @change="getsize(item.color,index)">
                      <el-option v-for="(jtem, jndex) in color" :key="jndex" :label="jtem" :value="jtem" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col v-if="item.color" :span="6">
                  <el-form-item label="型号" label-width="52px" required>
                    <el-select v-model="item.xin" size="mini" @blur="$forceUpdate()">
                      <el-option v-for="(jtem, jndex) in size[index]" :key="jndex" :label="jtem" :value="jtem" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="数量" label-width="52px" required>
                    <el-input v-model.number="item.number" oninput="javascript:this.value=this.value.replace(/\D|^0/g,'')" type="text" style="width:160px" placeholder="请输入数量" maxlength="5" size="mini" />
                  </el-form-item>
                </el-col>
                <el-col :span="4" class="search_btn">
                  <el-button type="danger" :disabled="index === 0" size="mini" @click="deleteCoach(index)">删除</el-button>
                  <el-button type="primary" size="mini" @click="add()">新增</el-button>
                </el-col>
              </el-row>
            </div>
          </div>

        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="btnLoading" size="mini" @click="pust()">确 定</el-button>
      </span>
    </el-dialog>
    <el-row class="gl_pt_15" style="text-align: right;">
      <el-pagination
        :current-page="Api_GET_ClubMaterialStockQO.Page"
        :page-size="Api_GET_ClubMaterialStockQO.MaxResultCount"
        :total="total"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>
  </div>
</template>

<script>
import { Api_GET_ClubMaterialStockQO, CreateMaterialStockInput } from '@/lib/form/hall/swaggerForm';
import { api_GET_ClubMaterialStock, api_GET_ClubMaterial, api_POST_ClubMaterialStockIn } from '@/extend/api/hallswaggerApi/app';
export default {
  data() {
    return {
      color: [],
      size: [],
      mater: [], // 物资
      total: 0,
      btnLoading: false,
      warehouse: [],
      courseForm: [{}],
      CreateMaterialStockInput: new CreateMaterialStockInput(),
      Api_GET_ClubMaterialStockQO: new Api_GET_ClubMaterialStockQO(),
      dialogVisible: false,
      tableLoading: false,
      tableData: [],
      isfollow: '',
      tableDate: [] // 录入时间

    };
  },
  watch: {
    dialogVisible: {
      deep: true,
      handler(val) {
        if (!val) {
          this.CreateMaterialStockInput = new CreateMaterialStockInput();
          this.courseForm = [{}];
          this.warehouse = [];
        }
      }
    }
  },
  created() {
    this.gettablelist();
  },
  methods: {
    gettablelist(page) {
      this.Api_GET_ClubMaterialStockQO.Page = page || 1;
      this.Api_GET_ClubMaterialStockQO.Sorting = 'creationTime DESC';
      this.Api_GET_ClubMaterialStockQO.SkipCount = (this.Api_GET_ClubMaterialStockQO.Page - 1) * this.Api_GET_ClubMaterialStockQO.MaxResultCount;
      this.Api_GET_ClubMaterialStockQO.MaterialStockTypeCode = 'Input';
      this.Api_GET_ClubMaterialStockQO.IncludeMaterial = true;
      this.Api_GET_ClubMaterialStockQO.IncludeInventories = true;
      this.Api_GET_ClubMaterialStockQO.IncludeDeleted = true;
      this.Api_GET_ClubMaterialStockQO.IncludeMaterialStockType = true;
      this.tableLoading = true;
      api_GET_ClubMaterialStock(this.Api_GET_ClubMaterialStockQO).then(res => {
        this.tableLoading = false;
        this.tableData = res.items;
        this.total = res.totalCount;
      }, error => {
        this.tableLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 新增
    add() {
      this.courseForm.push({});
    },
    // 切换录入日期
    changeDate (val) {
      const _start = val ? val[0] + ' 00:00:00' : null;
      const _end = val ? val[1] + ' 23:59:59' : null;
      this.Api_GET_ClubMaterialStockQO.StartTime = _start; // type: string
      this.Api_GET_ClubMaterialStockQO.EndTime = _end; // type: string
      this.gettablelist();
    },
    // 删除
    deleteCoach(index) {
      this.courseForm.splice(index, 1);
    },
    addstudent() {
      this.dialogVisible = true;
      this.getmater();
    },
    // 获取物资
    getmater() {
      api_GET_ClubMaterial({ 'StatusCode': 'Enable', 'IncludeInventories': true, 'Sorting': 'creationTime DESC' }).then(res => {
        this.mater = res.items;
      });
    },
    // 重置
    clickReset() {
      this.tableDate = [];
      this.Api_GET_ClubMaterialStockQO = new Api_GET_ClubMaterialStockQO();
      this.gettablelist();
    },
    // 分页
    sizeChange(MaxResultCount) {
      this.Api_GET_ClubMaterialStockQO.MaxResultCount = MaxResultCount;
      this.gettablelist();
    },
    pageIndexChange(currentPage) {
      this.gettablelist(currentPage);
    },
    getinventories() {
      this.color = this.getcolor(this.warehouse);
      this.courseForm = [{}];
    },
    getcolor(val) {
      var hash = [];
      var obj = {};
      for (var i = 0; i < val.length; i++) {
        if (!obj[val[i].color]) {
          hash.push(val[i].color);
          obj[val[i].color] = true;
        }
      }
      return hash;
    },
    getsize(val, index) {
      this.$set(this.courseForm[index], 'xin', '');
      var hash = [];
      for (var i = 0; i < this.warehouse.length; i++) {
        if (this.warehouse[i].color === val) {
          hash.push(this.warehouse[i].size);
        }
      }
      this.size[index] = [... new Set(hash)];
      console.log(this.size);
    },
    pust() {
      this.btnLoading = true;
      console.log(this.courseForm);
      for (var num = 0; num < this.courseForm.length; num++) {
        if (this.courseForm[num].color === null || this.courseForm[num].xin === null || this.courseForm[num].number === '' || this.courseForm[num].number === undefined) {
          this.$message({ type: 'warning', message: '请选择样式及数量' });
          this.btnLoading = false;
          return;
        }
      }

      var hash = [];
      for (var i = 0; i < this.courseForm.length; i++) {
        for (var j = 0; j < this.warehouse.length; j++) {
          if (this.courseForm[i].color === this.warehouse[j].color && this.courseForm[i].xin === this.warehouse[j].size) {
            hash.push(this.warehouse[j]);
          }
        }
      }
      for (var _i = 0; _i < hash.length; _i++) {
        for (var _j = _i + 1; _j < hash.length; _j++) {
          if (hash[_i].id === hash[_j].id) {
            this.$message({ type: 'warning', message: '无法加入相同颜色与规格物资' });
            this.btnLoading = false;
            return;
          }
        }
      }
      if (this.warehouse.length === 0) {
        this.$message({ type: 'success', message: '选择物资' });
        this.btnLoading = false;
        return;
      }

      this.CreateMaterialStockInput.materialId = this.warehouse[0].materialId;
      for (var n = 0; n < hash.length; n++) {
        this.CreateMaterialStockInput.materialInventoryInputs.push({});
        this.CreateMaterialStockInput.materialInventoryInputs[n].id = hash[n].id;
        this.CreateMaterialStockInput.materialInventoryInputs[n].count = this.courseForm[n].number;
      }
      if (this.CreateMaterialStockInput.materialInventoryInputs.length === 0) {
        this.$message({ type: 'warning', message: '请选择样式及数量' });
        this.btnLoading = false;
        return;
      }
      console.log(this.CreateMaterialStockInput);
      api_POST_ClubMaterialStockIn(this.CreateMaterialStockInput).then(res => {
        this.btnLoading = false;
        this.$message({ type: 'success', message: '入库成功' });
        this.gettablelist();
        this.dialogVisible = false;
      }, error => {
        this.btnLoading = false;
        this.CreateMaterialStockInput = new CreateMaterialStockInput();
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    }
  }

};
</script>

<style scoped>
.box_color {

     margin-right: 10px;

}
</style>
